<!DOCTYPE html>
<html  lang="en">
    <head>
        <title>Document</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <child ref="ref01"></child>
            <button @click="handleAdd()">
                clickMe
            </button>
            {{ msg }}
        </div>

        <script>
            Vue.component("child",{
                template: `<div>{{ msg }}</div>`,
                data(){
                    return { childmsg: '子组件的消息' }
                },
                methods: {
                    add(){
                        console.log("子组件的方法")
                    }
                }
            })
            let vm = new Vue({
                el: '#app',
                data: {
                    msg: 'ok',
                },
                methods: {
                    handleAdd(){
						// this.$refs.ref01获取其所有属性以及方法
                        this.msg = this.$refs.ref01.childmsg
                        this.$refs.ref01.add()
                    }
                }
            })
        </script>
    </body>
</html>